<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <h3>欢迎使用运输管理系统</h3>
            </div>
          </template>
          <div class="welcome-content">
            <p>当前登录角色: <strong>{{ userRole }}</strong></p>
            <p>您可以根据您的角色权限，在左侧菜单中访问相应的功能。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="stat-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.orders }}</div>
            <div class="stat-label">今日订单</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><Van /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.vehicles }}</div>
            <div class="stat-label">在途车辆</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.exceptions }}</div>
            <div class="stat-label">异常事件</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.revenue }}</div>
            <div class="stat-label">今日营收</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="permission-card">
          <template #header>
            <div class="card-header">
              <h3>角色权限说明</h3>
            </div>
          </template>
          <div class="permission-content">
            <h4>不同角色的权限说明：</h4>
            <ul>
              <li><strong>管理员 (ADMIN)</strong>: 可以访问所有菜单和功能</li>
              <li><strong>调度员 (DISPATCHER)</strong>: 可以访问仪表盘、订单管理、运输计划和调度执行</li>
              <li><strong>财务 (FINANCE)</strong>: 可以访问仪表盘、费用结算和报表分析</li>
              <li><strong>客服 (CUSTOMER_SERVICE)</strong>: 可以访问仪表盘、订单管理和基础数据</li>
              <li><strong>司机 (DRIVER)</strong>: 可以访问仪表盘和调度执行</li>
            </ul>
            <p>您当前登录的角色是: <strong>{{ userRole }}</strong>，可以在左侧菜单中看到您有权限访问的功能。</p>
            <p>您可以通过<router-link to="/system/role">角色管理</router-link>页面中的"权限设置"功能修改各角色的权限。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Document, Van, Warning, Money } from '@element-plus/icons-vue'

// 用户角色
const userRole = ref('管理员')
const roleNameMap = {
  'ADMIN': '管理员',
  'DISPATCHER': '调度员',
  'FINANCE': '财务',
  'CUSTOMER_SERVICE': '客服',
  'DRIVER': '司机'
}

// 统计数据
const stats = ref({
  orders: 0,
  vehicles: 0,
  exceptions: 0,
  revenue: '¥0'
})

// 获取用户信息
const getUserInfo = () => {
  const roleCode = localStorage.getItem('userRole') || 'ADMIN'
  userRole.value = roleNameMap[roleCode] || '未知角色'
  
  // 根据角色生成不同的模拟数据
  generateMockData(roleCode)
}

// 生成模拟数据
const generateMockData = (roleCode) => {
  // 随机数生成
  const getRandomInt = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  
  stats.value = {
    orders: getRandomInt(10, 100),
    vehicles: getRandomInt(5, 50),
    exceptions: getRandomInt(0, 10),
    revenue: `¥${getRandomInt(10000, 100000)}`
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.welcome-content {
  font-size: 16px;
  line-height: 1.6;
}

.stat-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  padding: 20px;
  height: 100px;
  margin-bottom: 20px;
}

.stat-icon {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.permission-card {
  margin-bottom: 20px;
}

.permission-content {
  font-size: 14px;
  line-height: 1.6;
}

.permission-content h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.permission-content ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.permission-content li {
  margin-bottom: 5px;
}
</style>
